<template>
  <view class="container" :style="{ backgroundColor: bgColor }">
    <view class="pic-wrap">
      <view v-if="title" class="title" :style="{ color: titleColor }">{{ title }}</view>
      <view class="img-wrap">
        <el-image :src="imgUrl" mode="aspectFit" width="100%" class="img"></el-image>
        <image v-if="showWatermark" src="https://mp-c3603e48-468f-4859-9888-0b616ac21d6c.cdn.bspapp.com/haimi-ai/watermark.png" mode="aspectFill" class="watermask"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { onLoad } from '@dcloudio/uni-app';
  
const bgColor = ref('#e4e4e4');
const title = ref('')
const titleColor = ref('#333333')
const showWatermark = ref(true)
const imgUrl = ref('https://mp-c3603e48-468f-4859-9888-0b616ac21d6c.cdn.bspapp.com/2023/11/27/51494528-33172488-0.png')
const route = useRoute()
console.log('route obj : ', route, route.value)

onLoad(options => {
  if (options.bc) {
    bgColor.value = options.bc
  }
  if (options.t) {
    titleColor.value = options.t
  }
  if (options.t) {
    title.value = options.t
    // #ifdef H5
    // 获取当前页面的<title>标签
    const titleElement = document.querySelector('title');
    
    // 修改标题内容
    titleElement.textContent = options.t;
    document.title = options.t;
    // #endif
  }
})
onMounted(() => {
  // if (route.query.color) {
  //   bgColor.value = route.query.color
  // }
  // if (route.query.title) {
  //   title.value = route.query.title
  // }
  // if (route.query.titleColor) {
  //   titleColor.value = route.query.titleColor
  // }
  // if (route.query.defaultImg) {
  //   imgUrl.value = route.query.defaultImg
  // }
  
  uni.getPushClientId({
    success: (res) => {
      let push_clientid = res.cid
      console.log('客户端推送标识:',push_clientid)
      if (push_clientid) {
        
        vk.callFunction({
          url: 'client/push/pub/addPushClientId',
          title: '请求中...',
          data: {
            userId: route.query.device,
            pushClientId: push_clientid
          },
        }).then((data) => {
          console.log('push client id: 存储成功')
        }).catch(() => {
          console.log('push client id: 存储失败')
        });
      }
    },
    fail(err) {
      console.log(err)
    }
  })
  
  uni.onPushMessage((res) => {
    console.log("收到推送消息：",res) //监听推送消息
    const { type, data } = res
    if (type === 'receive' && data && data.payload) {
      const { img, watermask } = data.payload
      // 图片加载后赋值
      // #ifdef H5
      const image = new Image()
      image.onload = function () {
        imgUrl.value = img
      }
      image.src = img
      // #endif
      // #ifndef H5
      imgUrl.value = img
      // #endif
      img.on
      if (watermask) {
        showWatermark.value = true
      } else {
        showWatermark.value = false
      }
    }
  })
})
</script>

<style scoped>
  .container {
    width: 100vw;
    height: 100vh;
    padding: 0 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }
  .pic-wrap {
    /* width: 96%; */
    margin-top: 320rpx;
  }
  .title {
    font-size: 48rpx;
    line-height: 64rpx;
    text-align: center;
  }
  .img-wrap {
    width: 100%;
    margin-top: 40rpx;
    position: relative;
  }
  .img {
    width: 100%;
  }
  .watermask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }
</style>